<template>
  <div>
    <div class="bottom">
      <el-page-header @back="$router.go(-1)" content="工程详情">
      </el-page-header>

      <div style="margin-top: 10px; background-color: #f4f4f4;font-size: 20px;height: 42px;
        width: 1426px;padding: 0px 14px;color: #666;border-radius:5px ;line-height:45px">
        工程信息
        <!-- {{ engDetails.serial_number }}
        {{ engDetails.name }}
        {{ engDetails.type }} -->
      </div>

      <div class="form">
        <el-form style="margin-top: 10px;">
          <el-row>
            <el-col :span="12">
              <el-form-item label="工程编号" style="margin-left: 80px;"><span style="margin-left: 300px;">{{
                engDetails.serial_number }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工程名称" style="font-size: 20px;"><span style="margin-left: 300px;">{{ engDetails.name
                  }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-form style="margin-top: 10px;">
          <el-row>
            <el-col :span="12">
              <el-form-item label="工程类型" style="margin-left: 80px;"><span style="margin-left: 300px;">{{ engDetails.type
                  }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工程状态" style="font-size: 20px;"><span
                  style="display:inline-block;margin-left: 300px;width: 53.6px;
              height: 24px;line-height: 22px;font-size: 12px;text-align: center;padding: 0 4px;color: #4fbc8d;background-color: pink;">{{ engDetails.status }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-form style="margin-top: 10px;">
          <el-row>
            <el-col :span="12">
              <el-form-item label="开始时间" style="margin-left: 80px;"><span style="margin-left: 300px;">{{
                engDetails.create_time }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结束时间" style="font-size: 20px;"><span style="margin-left: 300px;">{{
                engDetails.end_time }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <el-form style="margin-top: 10px;">
          <el-row>
            <el-form-item label="地址" style="margin-left: 80px;"><span style="margin-left: 300px;margin-left: 550px;">{{
              engDetails.address }}</span>
            </el-form-item>
          </el-row>
        </el-form>

        <el-form style="margin-top: 10px;">
          <el-row>
            <el-form-item label="工程负责人" style="margin-left: 80px;"><span
                style="margin-left: 300px;margin-left: 550px;">{{ engDetails.charge_id }}</span>
            </el-form-item>
          </el-row>
        </el-form>
      </div>
    </div>

    <div class="top">
       <div style="margin-top: 10px; background-color: #f4f4f4;font-size: 20px;height: 42px;
        width: 1426px;padding: 0px 14px;color: #666;border-radius:5px ;line-height:45px;">
        绑定信息
        <el-button type="primary" @click="toAdd"
          style="margin-left: 1245px;width: 55.6;height: 42px;background-color: #4fbc8d;">绑定</el-button>
      </div>
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%">

        <el-table-column type="index" :index="1" label="序号">
        </el-table-column>
        <el-table-column prop="serial_number" label="设备编号">
        </el-table-column>
        <el-table-column prop="name" label="设备名称">
        </el-table-column>
        <el-table-column prop="latitude" label="经度">
        </el-table-column>
        <el-table-column prop="longitude" label="纬度">
        </el-table-column>
        <el-table-column prop="cell" label="视频地址">
        </el-table-column>
        <el-table-column prop="status" label="在线状态">
          <template >
            <div>
              <el-tag v-if="engDetails.status == '监测中'" effect="dark" type="success">监测中</el-tag>
              <el-tag v-else-if="engDetails.status == '未绑定'" effect="dark" type="warning">未绑定</el-tag>
              <el-tag v-else effect="dark" type="danger">已结束</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <div>
              <el-button :underline="false" @click="open" type="success">解绑</el-button>
              <el-button :underline="false" @click="open1" type="success">下线</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 抽屉 -->
    <el-drawer @close="reset" size="50%" :title="title" :visible.sync="visible" direction="rtl"
      custom-class="demo-drawer" ref="drawer">
      <div class="demo-drawer__content" style="padding-right: 10px;">
        <!-- {{ this.formSave }}  -->
        <el-form :rules="rules" ref="myForm" :model="formSave">
          <el-row>
            <el-col style="width: 800px;height: 33px;background-color: rgb(244, 244, 244);margin-bottom: 15px;padding-left: 10px;">
              <el-form-item label="1.选择设备">
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>

            <el-col :span="12">
              <el-form-item label="设备">
                <el-select clearable class="select" v-model="formSave.type" placeholder="请选择设备">

                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col style="width: 800px;height: 33px;background-color: rgb(244, 244, 244) ;margin-bottom: 15px;padding-left: 10px;">
              <el-form-item label="2.配置设备">
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item prop="longitude" label="工程经度">
                <el-input style="width: 50%;" placeholder="请输入工程经度" v-model="formSave.longitude"
                  autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="latitude" label="工程纬度">
                <el-input style="width: 50%;" placeholder="请输入工程纬度" v-model="formSave.latitude"
                  autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item prop="type" label="视频流">
                <el-input style="width: 90%;" placeholder="请输入视频流" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="visible = false">取 消</el-button>
          <el-button type="primary" @click="toSubmit">确定</el-button>
        </div>
      </div>
    </el-drawer>

  </div>
</template>
<script>
import { get, del, post } from '@/utils/request'
import moment from 'moment'

// 引入lodash工具库 
import _ from 'lodash';

export default {
  data() {
    return {
      params: {
        page: 1,
        pageSize: 10,
      },
      // 抽屉标题 
      title: '绑定设备',
      // 控制抽屉显示与隐藏 
      visible: false,
      // 表格数据源 
      tableData: [],
      // 录入和修改表单数据对象 
      formSave: {},
      // 表单验证规则 
      rules: {
        latitude: [
          { required: true, message: '请输入纬度', trigger: "blur" },
        ],
        longitude: [
          { required: true, message: '请输入经度', trigger: "blur" },
        ],
        type: [
          { required: true, message: '请输入视频流', trigger: "blur" },
        ],
      }
    }
  },
  methods: {
    //弹框
    open() {
      this.$confirm('设备解绑后将自动下线，并且产生拆机工单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
    },
    open1() {
      this.$confirm('设备下线后将无法采集数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
    },

    toSubmit() {
      this.$refs['myForm'].validate((valid) => {
        if (valid) {

          console.log(' submit!!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 封装方法获取数据
    async getTable() {
      let temp = {
        ...this.params
      };
      let res = await get('/device/pageQuery', temp);
      console.log(res, '22222');
      this.tableData = res.data.list;
    },
    // 绑定工程信息 
    toAdd() {
      // 抽屉显示
      this.visible = true;

    },
    reset() {
      this.$refs['myForm'].resetFields();
    },

  },
  // 模态框关闭前重置表单校验 

  created() {
    // 接受路由跳转传递的参数 this.$route.query
    this.engDetails = this.$route.query;
    this.params.engineer_id = this.$route.query.id;
    this.getTable();
  },
  
}
</script>
<style lang="scss" scoped>
::v-deep .el-link--inner {
  margin-left: 8px;
  font-size: 12px;
}

.demo-drawer__footer {
  border-top: 1px solid #ececec;
  padding-top: 10px;
  position: fixed;
  bottom: 50px;
  width: 50%;
  text-align: center;
}

::v-deep .el-drawer__header {
  border-bottom: 1px solid cyan;
}
</style>